<template>
  <div class="multiLines">
    <div :id=id style="height: 260px;width: 400px;"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';


const props = defineProps({
  data: Object
})
const id = props.data.id;
const dataA = props.data.dataA;
const dataB = props.data.dataB;
const dataC = props.data.dataC;
const dataD = props.data.dataD;
const legend = props.data.legend;
const xAxisArr = props.data.xAxisArr; //x轴
const theColorList = props.data.theColorList;


onMounted(() => {
  getTheLines()
})

const getTheLines = () => {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    color: theColorList,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',

      }
    },
    legend: {
      data: legend,
      textStyle: {
        color: '#ffffff'
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        axisTick: {
          show: false
        },
        type: 'category',
        boundaryGap: false,
        data: xAxisArr
      }
    ],
    yAxis: [
      {
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#ffffff60'
          }
        },
        splitNumber: 4,
        type: 'value'
      }
    ],
    series: [
      {
        name: legend[0],
        type: 'line',
        // stack: 'Total',
        smooth: true,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          opacity: 0.2,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: `${theColorList[0]}00`
            },
            {
              offset: 1,
              color: `${theColorList[0]}ff`
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: dataA
      },
      {
        name: legend[1],
        type: 'line',
        // stack: 'Total',
        smooth: true,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          opacity: 0.2,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: `${theColorList[1]}00`
            },
            {
              offset: 1,
              color: `${theColorList[1]}ff`
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: dataB
      },
      {
        name: legend[2],
        type: 'line',
        // stack: 'Total',
        smooth: true,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          opacity: 0.2,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: `${theColorList[2]}00`
            },
            {
              offset: 1,
              color: `${theColorList[2]}ff`
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: dataC
      },
      {
        name: legend[3],
        type: 'line',
        // stack: 'Total',
        smooth: true,
        itemStyle: {
          opacity: 0
        },
        areaStyle: {
          opacity: 0.2,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: `${theColorList[3]}00`
            },
            {
              offset: 1,
              color: `${theColorList[3]}ff`
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: dataD
      },
    ]
  };

  option && myChart.setOption(option);

}


</script>
<style scoped>
.multiLines {
  height: 260px;
  width: 480px;
  display: flex;
  justify-content: center;
}
</style>